<template>
  <div class="bg-grey page">
    <drag @click="showCqcode"></drag>
    <div class="flex bg-white card">
      <div
        class="font-base text-box"
      >欢迎您使用申请圈独创的AI文书智能测评，您可以在下方文本框中输入或者点击“导入word”按钮来上传您的文书，然后再点击“开始测评”，只需要短短几秒钟，申请圈基于海量数据的AI文书智能测评就可以从【内容】、【句子】、【篇章结构】和【词汇】四个维度给您进行评分，同时也会自动给出您文书的总体评价。此外，您还可以点击“获取测评报告”按钮，找小助手免费获取一份针对您文书具体句子的详细测评报告。</div>
      <div class="info">
        <div >
          <van-icon name="../../icons/ceping@2x.png" size="13px"/>累计测评
          <span class="times">&nbsp;{{check_times}}&nbsp;</span>次
        </div>
        <div>
          <van-icon name="../../icons/gai@2x.png"  size="13px"/>累计修改
          <span class="times">&nbsp;{{modified_times}}&nbsp;</span>篇
        </div>
      </div>
      <!-- <span class="btn_upload">点击上传申请文件</span> -->
      <van-uploader :after-read="afterRead" :before-read="beforeRead" accept=".docx" name="file">
        <van-button class="btn btn-upload" plain hairline color="#0B3E98">点击上传申请文件</van-button>
      </van-uploader>
      <div class="format-label">支持格式*.docx</div>
      <textarea class="upload-txf font-base" name="upload" id="" cols="30" rows="10" v-model="text" placeholder="请上传申请文书"></textarea>
      <van-button
        v-if="!cdk_form_opened"
        class="btn btn-close"
        color="#0B3E98"
        @click="evaluate"
      >开始测评</van-button>
    </div>
    <div v-if="cdk_form_opened" class="flex bg-white card">
         <img src="https://st.shenqingquan.com/icon/qrcode_sqq.jpg" class="wechat-cqcode" alt="">
      <input v-model="cdk" type="text" placeholder="关注申请圈公众号回复“兑换码”获取" class="cdkey-input">
      <van-button
        :loading="btn_loading"
        loading-text="测评中..."
        class="btn btn-close"
        color="#0B3E98"
        @click="evaluate"
      >开始测评</van-button>
    </div>

    <van-popup v-model="cq_show" closeable close-icon-position="top-right">
      <div class="cqcode">
        <span class="cqcode-label">扫码添加小助手</span>
        <img
          class="cqcode-img"
          referrerpolicy="no-referrer"
          src="https://st.shenqingquan.com/static/img/wx-qrcode.5a5e0e15.png"
          alt=""
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import { importDataWord, checkCkdRequire, evaluateContent } from '../../api/api'
import Drag from '../../components/drag.vue'
import $api from '../../api/systemApi'
export default {
  components:{
    Drag
  },
  data() {
    return {
      check_times: '6131',
      modified_times: '2819',
      text:
        '',
      code_required: true,
      cdk_form_opened: false,
      cq_show: false,
      cdk: '',
      btn_loading:false
    }
  },
  methods: {
    showCqcode() {
      this.cq_show = true
    },
    beforeRead(file) {
      if (file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
        this.$toast('请上传 docx 格式的文档')
        return false
      }
      return true
    },
    afterRead(file) {
      const tempFile = file.file
      const type = tempFile.type
      const size = tempFile.size
      const newName = new Date().getTime() + tempFile.name
      let uploadFile = new File([tempFile], newName, { type, size })
      var formdata = new FormData()
      formdata.append('file', uploadFile)
      importDataWord(formdata)
        .then(res => {
          this.text = res.data.wordText
        })
        .catch(err => {
          debugger
        })
    },
    evaluate() {
      if(this.text === ''){
          this.$toast("文书内容为空")
          return
      }
      if(this.cdk=== ''&&this.code_required){
          this.$toast("请填写正确的兑换码")
          return
      }
      var formdata = new FormData()
      formdata.append('englishCnt', this.text)
      formdata.append('code', this.cdk)
      this.btn_loading = true
      evaluateContent(formdata).then(res => {
          let { code, msg, data } = res
          if (code === 500 || code === -3001) {//其他问题
            this.$toast(msg)
            this.btn_loading = false
          }
          if (code == 200&&data.id == 0){
            let formdata = new FormData()
            let {taskId,md5Cnt} = data
            formdata.append('taskId',taskId)
            formdata.append('md5Cnt',md5Cnt)
            this.retryData($api.retryScore, formdata, 5, 3000).then(res=>{
               let { code, msg, data } = res
               let payload = JSON.stringify(data)
              this.$router.push({ name: 'evaluation', params: { payload, content: data.report.comment, id: data.id } })
               this.btn_loading = false
            })
            return
          }
            if (code === 200 && data) {
            let payload = JSON.stringify(data)
            this.$router.push({ name: 'evaluation', params: { payload, content: data.report.comment, id: data.id } })
          }
          this.btn_loading = false
        })
        .catch(err => {
          this.btn_loading = false
        })
    },
    retryData(getData, param, times, delay) {
      return new Promise(function(resolve, reject) {
        function attempt() {
          getData(param)
            .then(data => {
              console.log(JSON.stringify(data))
              if (data.code == 200) {
                if (data.data.id == 0) {
                  console.log(`还有 ${times} 次尝试`)
                  if (0 == times) {
                    reject('测评失败,请重试！')
                  } else {
                    times--
                    console.log('delay:' + delay)
                    setTimeout(attempt, delay)
                  }
                } else {
                  resolve(data)
                }
              }
            })
            .catch(function(err) {
              reject(err)
            })
        }
        attempt()
      })
    }
  },
  created() {
    checkCkdRequire()
      .then(res => {
        let { data: required } = res
        if (required) {
          this.cdk_form_opened = true
        } else {
          this.code_required = false
        }
      })
      .catch(err => {
        debugger
      })
  }
}
</script>

<style scoped>
.wechat-cqcode{
  width: 50%;
  object-fit:contain;
  margin-bottom:20px;
}
.info>div{
  display:flex;
  align-items: center;
  padding: 20px 16px;
  flex: 1 1 50%;
}
.van-icon{
  margin-right:7px;
}
.van-icon>img{
  position:relative;
  top:4px;
}
.van-popup__close-icon {
  font-size: 44px;
}

.wechat-btn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* position: fixed; */
  position: absolute;
  right: 30px;
  top: 630px;
}
.times {
  color: #0b3e98;
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
}
.page {
  width: 100vw;
  overflow-x: hidden;
  overflow: auto;
}
.cdkey-input {
  width: 600px;
  height: 78px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #999999;
  padding-left: 30px;
}
.cdkey-input::placeholder {
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 33px;
}

.upload-txf {
  width: var(--common-width);
  height: 340px;
  border: none;
  background: #f5f5f5;
  border-radius: 13px;
}
.color-normal {
  color: #0b409c;
}
.format-label {
  margin: 20px auto 30px;
  height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 33px;
}

.btn-close {
  margin-top: 40px;
  margin-bottom: 10px;
}

.btn-upload .van-button__text {
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #0b3e98;
  line-height: 42px;
}
.btn-upload {
  margin-top: 30px;
}
.van-button--hairline::after {
  border-radius: 20px;
  border: 1px solid #0b409c;
}
</style>
